<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
    <link href="/static/tencent/tcplayer.min.css" rel="stylesheet"/>
    <script src="/static/tencent/libs/hls.min.0.13.2m.js"></script>
    <script src="/static/tencent/tcplayer.v4.3.0.min.js"></script>
</head>
<body>
<video height="400" id="player-container-id" preload="auto" width="800"></video>

<script>
    // 播放器设置
    let player = TCPlayer("player-container-id", {
        fileID: "[[${fileId}]]",
        appID: "[[${appId}]]",
        psign: "",
        playbackRates: [0.5, 1, 1.25, 1.5, 2],  // 开启倍速
        // controlBar: {
        //     progressControl: false  // 隐藏进度条
        // },
        plugins: {
            ContextMenu: {
                statistic: true  // 开启状态菜单选项
            }
        }
    });

    // 播放器加载完成回调
    player.ready(function () {
        // 监听获取媒体数据
        player.on('progress', function () {
            console.log('视频数据准备就绪');
        });

        // 监听下一帧数据不足
        player.on('canplay', function () {
            console.log('播放器准备就绪');
        });

        // 监听可以持续播放
        player.on('canplaythrough', function () {
            console.log('可以持续播放');
        });

        // 监听metadata加载
        player.on('loadedmetadata', function () {
            console.log('已加载视频的 metadata');
        });

        // 监听被迫停止播放
        player.on('waiting', function () {
            console.log('视频无法继续播放');
        });

        // 监听视频速率改变
        player.on('ratechange', function (e) {
            console.log('用户改变当前播放速率：', player.playbackRates);
        });

        // 监听开始播放
        player.on('play', function () {
            console.log('用户开始播放：', player.currentTime());
        });

        // 监听停止播放
        player.on('pause', function () {
            console.log('用户停止播放：', player.currentTime());
        });

        // 监听视频播放进度
        player.on('timeupdate', function () {
            console.log('视频播放中：', player.currentTime());
        });

        // 监听视频播放完成
        player.on('ended', function () {
            console.log('视频已经完成播放：', player.currentTime());
        });
    });
</script>
</body>
</html>